<!DOCTYPE html>
<html>
<!-- 曾浩南 -->

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>电影</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>

<body class="layui-layout-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px">
        <button class="layui-btn layui-btn-normal">
            <a href="../view/movie/addMovie.html">添加电影</a>
        </button>
        <input type="text" id="txtCont" required lay-verify="required" placeholder="关键字查询" style="width: 300px; height: 25px; margin-left: 50px;">
        <!-- //搜索按钮 -->
        <button class="layui-btn layuiadmin-btn-admin layui-btn-sm" lay-submit="" lay-filter="" id="btn_search">
            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
        </button>
        <!-- //搜索按钮 -->
        <table id="table" lay-filter="tables"></table>
    </div>

    <script src="../js/lodash.min.js"></script>
    <script src="../layui/jquery-1.12.4.min.js"></script>
    <script src="../layui/layui.js"></script>
    <script>

        layui.use(['table', 'form'], function () {
            var table = layui.table;
            var form = layui.form;
            table.render({
                elem: "#table",
                url: "/api/Movie",
                page: true,//开启分页
                cols: [[ //表头
                    {
                        field: 'name',
                        title: '名称',
                        sort: true,
                    },
                    {
                        field: 'type',
                        title: '类型',
                    },
                    {
                        field: 'area',
                        title: '地区',
                        sort: true,
                    },
                    {
                        field: 'time',
                        title: '时长',
                        sort: true,
                    },
                    {
                        field: 'isHot',
                        title: '正在热映',
                        sort: true,
                        templet: "#hotSwitch"
                    },
                    {
                        field: 'isComing',
                        title: '即将上映',
                        sort: true,
                        templet: "#comingSwitch"
                    },
                    {
                        field: 'isClassic',
                        title: '经典影片',
                        sort: true,
                        templet: "#classicSwitch"
                    },
                    {
                        title: '操作',
                        width: 320,
                        templet:
                            `<div class="layui-btn-group">
                            <button class="layui-btn layui-btn-sm layui-btn-default" onclick="puts('{{d._id}}',this)">
                                基本信息
                            </button>

                            <button class="layui-btn layui-btn-sm layui-btn-default" onclick="openWindow('{{d._id}}','{{d.name}}')"> 
                                导演 
                            </button>
                            <button class="layui-btn layui-btn-sm layui-btn-default" onclick="performer('{{d._id}}','{{d.name}}')"> 
                                演员 
                            </button>
                            <button class="layui-btn layui-btn-sm layui-btn-default" onclick="Stills('{{d._id}}','{{d.name}}')"> 
                                剧照 
                            </button>
                            <button class="layui-btn layui-btn-sm layui-btn layui-btn-danger" onclick="del('{{d._id}}',this)">
                                
                                <i class="layui-icon">&#xe640;</i>
                            </button>
                        </div>`
                    },
                ]]
            });

            form.on('switch(isHot)', function (obj) {
                $.ajax({
                    url: "/api/Movie/" + obj.value,
                    method: "put",
                    data: {
                        isHot: obj.elem.checked
                    }
                })
            });
            form.on('switch(isComing)', function (obj) {
                $.ajax({
                    url: "/api/Movie/" + obj.value,
                    method: "put",
                    data: {
                        isComing: obj.elem.checked
                    }
                })
            });
            form.on('switch(isClassic)', function (obj) {
                $.ajax({
                    url: "/api/Movie/" + obj.value,
                    method: "put",
                    data: {
                        isClassic: obj.elem.checked
                    }
                })
            });

        });

        //查询
        $("#btn_search").click(function () {
            const key = $("#txtCont").val();
            layui.table.reload("table", {
                where: {
                    key,
                    page: 1,
                },
                page: {
                    curr: 1 //重新设置第一页
                }
            });
        })

        function del(clId, btn1) {
            layer.confirm('确定要删除吗?',
                {
                    icon: 3,
                    title: '删除'
                }, function (index) {
                    $.ajax({
                        url: "/api/Movie/" + clId,
                        method: "delete"
                    })
                    $(btn1).parents("tr").remove();
                    layer.close(index);
                });
        }

        function puts(id) {
            location.href = "../view/movie/updateMovie.html?id=" + id;
        }
        function openWindow(id, name) {//导演
            layer.open({
                title: ['电影：' + name, 'font-size:18px;color:rgba(240,2,2,.8)'],
                type: 2,
                content: '../view/movie/director.html?id=' + id,
                area: ['800px', '400px'],

            });
        }

        let performer = function (id, name) {//演员
            layer.open({
                title: "电影：" + name,
                type: 2,
                area: ['800px', '400px'],
                content: "../view/movie/performer.html?id=" + id,
            })
        }

        let Stills = function (id, name) {//剧照
            layer.open({
                title: "电影：" + name,
                type: 2,
                area: ['800px', '400px'],
                content: "../view/movie/Stills.html?id=" + id,

            })
        }


    </script>

    <script id="hotSwitch" type="text/html">
        <input type="checkbox" lay-skin="switch" data-field="isHot" lay-filter="isHot" value="{{d._id}}" {{d.isHot?'checked' : '' }}>
    </script>

    <script id="comingSwitch" type="text/html">
        <input type="checkbox" lay-skin="switch" data-field="isComing" lay-filter="isComing" value="{{d._id}}" {{d.isComing?'checked' : '' }}>
    </script>

    <script id="classicSwitch" type="text/html">
        <input type="checkbox" lay-skin="switch" data-field="isClassic" lay-filter="isClassic" value="{{d._id}}" {{d.isClassic?'checked' : '' }}>
    </script>
</body>

</html>